<template>
  <div class="home">
    <!-- 轮播图部分 -->
    <el-carousel :interval="4000" type="card" height="400px">
      <el-carousel-item v-for="item in carouselImages" :key="item.id">
        <img :src="item.url" :alt="item.title" class="carousel-image">
      </el-carousel-item>
    </el-carousel>

    <!-- 花店特色部分 -->
    <div class="features">
      <h2 class="section-title">花店特色</h2>
      <el-row :gutter="20">
        <el-col :span="8" v-for="feature in features" :key="feature.id">
          <el-card class="feature-card">
            <el-icon class="feature-icon" :size="50">
              <component :is="feature.icon" />
            </el-icon>
            <h3>{{ feature.title }}</h3>
            <p>{{ feature.description }}</p>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 花店介绍部分 -->
    <div class="about">
      <h2 class="section-title">关于我们</h2>
      <el-row :gutter="40">
        <el-col :span="12">
          <div class="about-content">
            <h3>{{ shopInfo.name }}</h3>
            <p>{{ shopInfo.description }}</p>
            <div class="contact-info">
              <p><el-icon><Location /></el-icon> 地址：{{ shopInfo.address }}</p>
              <p><el-icon><Phone /></el-icon> 电话：{{ shopInfo.phone }}</p>
              <p><el-icon><Clock /></el-icon> 营业时间：{{ shopInfo.hours }}</p>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <img :src="shopInfo.image" alt="店铺照片" class="shop-image">
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { Clock, Location, Phone, Present, Star, Van } from '@element-plus/icons-vue'
import { ref } from 'vue'

export default {
  name: 'HomePage',
  components: {
    Location,
    Phone,
    Clock,
    Present,
    Van,
    Star
  },
  setup() {
    const carouselImages = ref([
      { id: 1, url: require('@/assets/精美花束.jpg'), title: '精美花束' },
      { id: 2, url: require('@/assets/婚礼花艺.jpg'), title: '婚礼花艺' },
      { id: 3, url: require('@/assets/节日花艺.jpg'), title: '节日花艺' }
    ])

    const features = ref([
      {
        id: 1,
        icon: 'Present',
        title: '精心设计',
        description: '专业花艺师精心搭配，为您打造独特的花艺作品'
      },
      {
        id: 2,
        icon: 'Van',
        title: '快速配送',
        description: '同城2小时送达，保证花束新鲜度'
      },
      {
        id: 3,
        icon: 'Star',
        title: '优质服务',
        description: '7x24小时在线客服，贴心售后服务'
      }
    ])

    const shopInfo = ref({
      name: '流心花店',
      description: '流心花店成立于2010年，是一家专注于为顾客提供高品质花艺服务的专业花店。我们提供新鲜花束、婚礼花艺、节日礼品等多种服务，致力于为每一位顾客带来美好的花艺体验。',
      address: '北京市朝阳区xxx街xxx号',
      phone: '010-12345678',
      hours: '09:00-21:00',
      image: require('@/assets/logo.png')
    })

    return {
      carouselImages,
      features,
      shopInfo
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .section-title {
    text-align: center;
    margin: 40px 0;
    font-size: 32px;
    color: #333;
  }

  .features {
    margin: 60px 0;

    .el-col {
      display: flex;
    }

    .feature-card {
      text-align: center;
      padding: 30px;
      transition: transform 0.3s;
      flex: 1;
      display: flex;
      flex-direction: column;

      &:hover {
        transform: translateY(-10px);
      }

      .feature-icon {
        color: #409EFF;
        margin-bottom: 20px;
      }

      h3 {
        margin: 15px 0;
        color: #333;
        font-size: 18px;
      }

      p {
        color: #666;
        line-height: 1.6;
        margin: 0;
        flex: 1;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .about {
    margin: 60px 0;

    .about-content {
      h3 {
        font-size: 24px;
        margin-bottom: 20px;
        color: #333;
      }

      p {
        color: #666;
        line-height: 1.8;
        margin-bottom: 20px;
      }

      .contact-info {
        p {
          display: flex;
          align-items: center;
          margin: 10px 0;

          .el-icon {
            margin-right: 10px;
            color: #409EFF;
          }
        }
      }
    }

    .shop-image {
      width: 100%;
      height: 400px;
      object-fit: cover;
      border-radius: 8px;
    }
  }
}
</style> 